<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Spine - Controladores</title>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/spine.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #mensaje {width: 300px;height: 20px;border:1px solid black;}
        </style>
    </head>
    <body>
        <script type="text/javascript">
            // definicion y construccion de un controlador
            var HotSpotController = Spine.Controller.sub();
            HotSpotController.include({
                elements : { 
                    // el mapeo de elmentos sigue el patron :
                    // "selector-jquery" : "nombre-var javascript"
                    "#palabra" : "palabra", // equivale a  : this.palabra = this.$("#palabra");
                    "#mensaje" : "mensaje"
                },
                events : {
                    // el mapeo de eventos sigue el patron :
                    // "evento selector-jquery : nombre-funcion"
                    "click #btnClick" : "showMensaje"
                },
                init:function(){
                     
                    console.info("constructor"); // contructor
                    // this.palabra = this.$("#palabra");
                },
                showMensaje : function(){
                    var texto = this.palabra.val();
                    this.mensaje.empty().html(texto);
                    
                    // no funciona debido a cross site
                    var URL = "http://localhost/tecdrill/index.php/cservice/login";
                    $.post(URL,{},function(response){
                        console.info(response);
                    });
                }
            });
            
            jQuery(function($){
                return new HotSpotController({ el:$("#hotspotcontroller")});
            });
        </script>
        <div id="hotspotcontroller">
            <input id="palabra" type="text" placeholder="Ingresar Texto"/>
            <button id="btnClick">Click</button>
            <div id="mensaje"></div>
        </div>
        
    </body>
</html>
